<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="../userResource/css/base.css">
    <link rel="stylesheet" type="text/css" href="../userResource/css/index.css">
    <link rel="stylesheet" type="text/css" href="../userResource/css/login.css">
</head>
<body>
<div class="area wm_area">
    <div class="wrap">
        <div class="title_main">
            <p class="f_left"><span class="icon"><img
                    src="../userResource/images/ac2ede71012d48dc953ac3a52ac7ad8c.jpg"></span>电竞外设专区</p>
            <a href="/shop/productList.html?cname=电竞外设" target="_blank" class="f_right more">更多<span></span></a>
        </div>
        <div class="cf">
            <a href="#" target="_blank" class="f_left ad in"><img
                    src="../userResource/images/8b3cd23eae73440aaa030fd6bdf11e56.jpg" width="226" height="614"
                    alt=""></a>
        </div>
    </div>
</div>
<script src="../vendors/jquery/dist/jquery.min.js"></script>
<script src="../vendors/myself/unslider.min.js"></script>
<script src="../vendors/myself/myself.js"></script>
<script src="../vendors/myself/init.js"></script>
<script type="text/javascript">
    /**
     * 数据加载
     */
    var uid;
    $(function () {

        initHtml();

        $.ajax('/product/getProductkuidAndPicByCname', {
            type: 'get',
            data: 'cname=电竞外设',
            success: function (data) {
                $.each(data.rows, function (index, row) {
                    var div_product_item;
                    if ((index + 1) % 4 != 0) {
                        div_product_item = $('<div class="product-item list in" ></div>');
                    } else {
                        div_product_item = $('<div class="product-item list in" style="margin-right:0;"></div>');
                    }
                    if (row.storenum == 0) div_product_item.append('<p class="identity null">售罄</p>');
                    var detailUrl = 'productDetail.html?pid=' + row.product.pid + '&cid=' + row.product.cid;
                    if (row.isCollect == 1) {
                        div_product_item.append('<a href="javascript:void(0)" style="color: #e90404;" data-pid="' + row.product.pid + '" class="needLogin like" data-num="' + row.product.pheart + '"><span style="background-position: -145px 0"></span><font id="heartNum">' + row.product.pheart + '</font></a>')
                    }else {
                        div_product_item.append('<a href="javascript:void(0)" data-pid="' + row.product.pid + '" class="needLogin like" data-num="' + row.product.pheart + '"><span></span><font id="heartNum">' + row.product.pheart + '</font></a>')
                    }
                    div_product_item.append('<a href="' + detailUrl + '" target="_blank"><img' +
                        '                        src="' + row.product.imgurl + '" alt="' + row.product.pname + '"' +
                        '                        title="' + row.product.pname + '"></a>');
                    div_product_item.append('<p class="name ellipsis" title="' + row.product.pname + '" style="word-wrap: break-word; word-break: break-all;">' + row.product.pname + '</p>')
                    div_product_item.append('<p class="price">¥' + row.product.price + '</p>');
                    var div_product_star = $('<div class="add">' +
                        '                    <a href="' + detailUrl + '" class="btn" target="_blank"><span></span>加入购物车</a>' +
                        '                </div>');
                    div_product_star.prepend('<a class="star stars' + row.product.pstart + '" href="#"></a>');
                    div_product_item.append(div_product_star);
                    $('.cf').append(div_product_item);
                });
                initProductBtn();
                initHear();
            }
        });
    })
</script>

</body>
</html>